<template>
  <div>
    <el-button size="default" @click="full" style="display: inline-block">全屏</el-button>
    <el-input v-model="previewFileName" style="display: inline-block; width: 120px"></el-input>
    <el-button size="default" @click="preview" style="display: inline-block">预览word</el-button>

    <div id="markdown" style="padding: 24px; background-color: #fff">
      <article class="markdown-body">
        <div v-html="compileMarkDown(content)"></div>
        x
      </article>
      <Md></Md>
    </div>
  </div>
</template>

<script>
  import Md from './md.vue';
  import { getMdUrl, getMdByOutPutStream } from '@http/api';
  import axios from 'axios';
  import showdown from 'showdown';
  import 'github-markdown-css';
  showdown.setFlavor('github');
  var converter = new showdown.Converter();
  //表格显示github
  converter.setOption('tables', true);
  converter.setOption('parseImgDimensions', true);
  import { encrypto } from './cryptoMy';
  export default {
    components: {
      Md,
    },
    // 定义自定义指令 v-highlight 代码高亮
    mounted() {
      this.getDocment2();
    },
    data() {
      return {
        content: '',
        previewFileName: '',
      };
    },
    methods: {
      /**
       * AES  加密 -CBC
       * ECB：是一种基础的加密方式，密文被分割成分组长度相等的块（不足补齐），
       *      然后单独一个个加密，一个个输出组成密文。
       * CBC：是一种循环模式，前一个分组的密文和当前分组的明文异或或操作后再加密，
       *      这样做的目的是增强破解难度。
       */

      full() {
        this.$fullscreen.toggle(document.getElementById('markdown'), {
          background: '#fffff',
        });
      },

      // 通过URL形式获取md文件
      getDocment(val) {
        // 请求接口
        //getMdUrl({ objectName: encrypto("xxx.md") }).then(res => {
        getMdUrl({ objectName: 'xxx.md' }).then(res => {
          axios({
            method: 'get',
            url: res.data.data,
          }).then(md => {
            //console.log(md.data)
            this.content = md.data;
          });
        });
      },

      // 通过文件流形式获取md文件
      getDocment2(val) {
        // 请求接口
        getMdByOutPutStream({ bucketName: 'mahuaide', objectName: 'xxx.md' }).then(res => {
          this.content = res.data;
        });
      },
      // 转换markdown语法为html语法
      compileMarkDown(val) {
        let html_mk = converter.makeHtml(val);
        return html_mk;
      },

      preview() {
        getMdUrl({ objectName: this.previewFileName || '1.docx' }).then(res => {
          console.log(res.data);
          window.open(
            'http://192.168.121.135:8012/onlinePreview?url=' +
              window.btoa(
                unescape(encodeURIComponent(window.decodeURIComponent(JSON.parse(res.data).data)))
              ) +
              '&watermarkTxt=' +
              encodeURIComponent('绝密')
          );
        });
      },
    },
  };
</script>

<style>
  #markdown {
    overflow: auto;
  }
</style>
